<template>
  <div class='container'>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>试题录入</span>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item prop="subjectID" label="学科:">
          <el-select @change="getsublist" style="width: 400px;" v-model="form.subjectID" placeholder="请选择">
            <el-option v-for="(item,index) in getform.getsub" :key="index
          " :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="catalogID" label="目录:">
          <el-select style="width: 400px;" v-model="form.catalogID" placeholder="请选择">
            <el-option v-for="(item,index) in getform.directory" :key="index" :label="item.directoryName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="enterpriseID" label="企业:">
          <el-select @change="getemplist" style="width: 400px;" v-model="form.enterpriseID" placeholder="请选择">
            <el-option v-for="item in getform.getemp" :key="item.id" :label="item.shortName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市:" prop="province">
          <el-select class="cityleft" @change="getprovinces" v-model="form.province" placeholder="请选择">
            <el-option v-for="item in provinces" :key="item.city" :label="item" :value="item"></el-option>
          </el-select>
          <el-select @change="getcity" v-model="form.city" placeholder="请选择">
            <el-option v-for="item in citys" :key="item.area" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="direction" label="方向:">
          <el-select @change="dirlist" style="width: 400px;" v-model="form.direction" placeholder="请选择">
            <el-option v-for="item in getdir" :key="item.id" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型:" prop="questionType">
          <el-radio-group @change="typechange" v-model="form.questionType">
            <el-radio label="1">单选</el-radio>
            <el-radio label="2">多选</el-radio>
            <el-radio label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度:" prop="difficulty">
          <el-radio v-model="form.difficulty" label="1">简单</el-radio>
          <el-radio v-model="form.difficulty" label="2">一般</el-radio>
          <el-radio v-model="form.difficulty" label="3">困难</el-radio>
        </el-form-item>
        <el-form-item prop="question" label="题干:">
          <div class="local-quill-editor">
            <quill-editor ref="myLQuillEditor" v-model="form.question" :options="editorOption" class="editor" @blur="onEditorBlur" @focus="onEditorFocus" @change="onEditorChange">
              >
            </quill-editor>
          </div>
        </el-form-item>
        <el-form-item label="选项:" v-if="form.questionType!=='3'">
          <div v-for="(obj,index) in form.options" :key="index" class="qwe">
            <div class="qaz">
              <el-radio @change="lmsg(index)" v-if="form.questionType==='1'" class="eleradio" v-model="obj.isRight" :label="true">{{obj.code + ':'}}</el-radio>
              <el-checkbox v-else v-model="obj.isRight" :label="obj.code + ':'"></el-checkbox>
              <el-input placeholder="请输入内容" v-model="obj.title"></el-input>
              <ImageUpload class="avatar-uploader el-upload--picture-card" @uodataUrl="uodataUrl($event,index)"></ImageUpload>
            </div>
          </div>
          <div>
            <el-button @click="addqus" class="danger" type="danger" :disabled="form.type==='1' ">+增加选项与答案</el-button>
          </div>
        </el-form-item>
        <el-form-item label="解析视频:">
          <el-input v-model="form.videoURL" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item prop="answer" label="答案解析:">
          <div class="local-quill-editor">
            <quill-editor ref="myLQuillEditor" v-model="form.answer" :options="editorOption" class="editor" @blur="onEditorBlur" @focus="onEditorFocus" @change="onEditorChange">
              >
            </quill-editor>
          </div>
        </el-form-item>
        <el-form-item label="题目备注" class="message">
          <el-input v-model="form.remarks" style="width: 400px;" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="试题标签">
          <el-select v-model="form.tags" placeholder="请选择试题标签">
            <el-option v-for="(obj,index) in getform.gettags" :key="index" :label="obj.label" :value="obj.label"></el-option>
          </el-select>
        </el-form-item>
        <!-- 提交按钮 -->
        <el-form-item class="button">
          <el-button @click="submit" type="primary" v-if='!form.id'>确认提交</el-button>
          <el-button @click="submit" type="success" v-else>确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// 基础题库
import { add, choice } from '../../api/hmmm/questions'
// 目录
import { list as directorylist } from '../../api/hmmm/directorys'
// 标签
import { simple as taglist } from '../../api/hmmm/tags'
// 方向
import { direction, questionType, difficulty } from '../../api/hmmm/constants'
// 学科
import { simple } from '../../api/hmmm/subjects'
// 企业
import { list } from '../../api/hmmm/companys'
// 城市
import { provinces, citys } from '../../api/hmmm/citys'
// 富文本引入样式和quillEditor
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
// 导入全局组件上传图片
import ImageUpload from '../components/ImageUpload'
// 富文本工具栏配置项
const toolbarOptions = [
  // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['bold', 'italic', 'underline', 'strike'],
  // 引用  代码块-----['blockquote', 'code-block']
  ['blockquote', 'code-block'],
  // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ header: 1 }, { header: 2 }],
  // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ list: 'ordered' }, { list: 'bullet' }],
  // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ script: 'sub' }, { script: 'super' }],
  // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ indent: '-1' }, { indent: '+1' }],
  // 文本方向-----[{'direction': 'rtl'}]
  [{ direction: 'rtl' }],
  // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ size: ['small', false, 'large', 'huge'] }],
  // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ color: [] }, { background: [] }],
  // 字体种类-----[{ font: [] }]
  [{ font: [] }],
  // 对齐方式-----[{ align: [] }]
  [{ align: [] }],
  // 清除文本格式-----['clean']
  ['clean'],
  // 链接、图片、视频-----['link', 'image', 'video']
  ['image', 'video']
]
export default {
  name: 'LocalQuillEditor',
  // 注册 quillEditor
  components: {
    quillEditor,
    ImageUpload
  },
  data () {
    return {
      Lmtags: [],
      // 难度
      difflist: difficulty,
      // 题型
      questionType: questionType,
      // 方向
      getdir: [],
      // 市
      provinces: [],
      // 区
      citys: [],
      imageUrl: '',
      content: '',
      typerad: '',
      diffrad: '',
      editorOption: {
        modules: {
          toolbar: toolbarOptions
        },
        theme: 'snow',
        placeholder: '请输入正文'
        // Some Quill optiosn...
      },
      form: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 城市1
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        // checkList: [], // 多选
        // choicesinp: '', // 选项input
        // choicesinp1: '', // 选项input
        // choicesinp2: '', // 选项input
        // choicesinp3: '', // 选项input
        videoURL: '', // 解析视频
        desc: '', // 题目标题
        answer: '', // 答案解析
        tags: '', // 试题标签
        imageUrl: '', // 图片地址
        remarks: '', // 题目备注
        // 选项
        options: [{
          code: 'A', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案
        }, {
          code: 'B', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案
        }, {
          code: 'C', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案
        }, {
          code: 'D', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案
        }]
      },
      getform: {
        getsub: [],
        getemp: [],
        directory: [],
        gettags: []
      },
      xuanxiang: ['E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      rules: {
        subjectID: [ // 学科验证
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [ // 目录验证
          { required: true, message: '请选择目录', trigger: 'change' }
        ],
        enterpriseID: [ // 企业验证
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        province: [ // 城市验证
          { required: true, message: '请选择城市', trigger: 'change' }
        ],
        direction: [ // 城市验证
          { required: true, message: '请选择方向', trigger: 'change' }
        ],
        city: [ // 城市验证
          { required: true, message: ' ', trigger: 'change' }
        ],
        difficulty: [ // 难度验证
          { required: true, message: '请选择难度', trigger: 'change' }
        ],
        questionType: [ // 题型验证
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
        question: [ // 题干验证
          { required: true, message: '请输入题干', trigger: 'change' }
        ],
        answer: [ // 答案解析验证
          { required: true, message: '请输入答案解析', trigger: 'change' }
        ]

      }
    }
  },
  methods: {
    // 失去焦点事件
    onEditorBlur (e) {
      // console.log('onEditorBlur: ', e)
    },
    // 获得焦点事件
    onEditorFocus (e) {
      // console.log('onEditorFocus: ', e)
    },
    // 内容改变事件
    onEditorChange (e) {
      // console.log('onEditorChange: ', e)
    },
    onSubmit () {
      // console.log('submit!')
    },

    // 提交
    async submit () {
      // 兜底校验
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (!this.form.id) {
            const subres = await add(this.form)
            if (subres.status === 200) {
              this.$message.success('提交成功')
              console.log(this.$options)
              this.form = this.$options.data.form
              this.$refs.form.resetFields()
            } else {
              this.$message.error('提交失败')
            }
          } else if (this.form.id) {
            // const res = await update(this.form)
            console.log(this.form)
          }
        } else {
          this.$message.error('提交失败')
          return false
        }
      })
    },
    // 学科
    async getsublist () {
      const res1 = await simple()
      this.getform.getsub = res1.data
      // console.log(res1.data)
      // 目录
      const dirres = await directorylist(this.form)
      this.getform.directory = dirres.data.items
      // console.log(dirres.data.items)
      // 标签
      const tagres = await taglist(this.form)
      this.getform.gettags = tagres.data
      // console.log(tagres)
    },
    // 企业
    async getemplist () {
      const res2 = await list(this.form)
      this.getform.getemp = res2.data.items
    },
    // 城市
    getprovinces () {
      this.provinces = provinces()
      // console.log(this.provinces)
      this.getcity()
    },
    getcity () {
      this.citys = citys(this.form.province)
    },
    // 方向
    dirlist () {
      this.getdir = direction
      // console.log(this.direction)
    },
    // 选项中的添加按钮
    addqus () {
      if (this.xuanxiang.length === 0) return this.$message.error('没有更多选项了')
      this.form.options.push({
        code: this.xuanxiang[0],
        title: '',
        img: '',
        isRight: false
      })
      this.xuanxiang.shift()
    },
    // 图片改变函数
    uodataUrl (url, index) {
      this.form.options[index].img = url
    },
    // 单选
    lmsg (index) {
      this.form.options.forEach((item) => {
        item.isRight = false
      })
      this.form.options[index].isRight = true
    },
    // 多选切换单选全不选
    typechange () {
      const typeres = this.form.options.filter((item) => {
        item.isRight = false
      })
      if (typeres.length >= 2) {
        this.form.options.forEach((item) => {
          item.isRight = false
        })
      }
    }
  },
  async created () {
    // 调用城市列表
    this.getprovinces()
    this.getsublist()
    this.dirlist()
    this.getemplist()
    if (this.$route.query.id) {
      const ret = await choice()
      const info = ret.data.items.find(item => item.id === Number(this.$route.query.id))
      this.form = info
    }
  }

}
</script>

<style scoped lang='less'>
.text {
  font-size: 14px;
  margin-top: 20px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.box-card {
  margin: 20px 20px;
}
.editor {
  height: 200px;
}
.local-quill-editor {
  margin-bottom: 50px;
}
.danger {
  margin-top: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader {
  margin-top: -10px;
  margin-left: 15px;
  width: 100px;
  border: 1px dotted #8c939d;
  border-radius: 5px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  color: #8c939d;
  width: 108px;
  height: 58px;
  line-height: 58px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  // display: inline-block;
}
.el-icon-plus:before {
  content: '\e6d9';
}
.avatar-uploader-icon {
  color: #8c939d;
  width: 100px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  font-size: 20px;
}
.el-radio {
  padding-top: 12px;
}

.eleradio {
  width: 20px;
}

.message {
  margin-top: 50px;
}
.cityleft {
  margin-right: 20px;
}
.elmmentInput {
  width: 200px;
  height: 20px;
}
.qwe {
  display: flex;
  margin-bottom: 10px;
}
.qaz {
  display: flex;
  margin-top: 12px;
  margin-right: 10px;
}
// .avatar-uploader {
//   position: absolute;
//   left: 18.875rem;
//   bottom: 69px;
//   width: 4.25rem !important;
//   height: 4.25rem !important;
//   border-radius: 10%;
//   border: 0.0625rem dashed #d9d9d9;
//   text-align: center;
// }
.el-upload--picture-card {
  width: 100px;
  height: 50px;
  line-height: 60px;
  text-align: center;
}
</style>
